<template>
  <!--理赔页面-->
  <div class="lipei">
    <order :order="order" :delayrisk="delayrisk">
      <p class="title">延误险订单详情</p>
      <wv-group class="mymsg">
        <wv-cell title="被保险人总数" :value="delayrisk.insurantNumber"></wv-cell>
        <wv-cell title="其中未成年人数" :value="delayrisk.minorNumber"></wv-cell>
        <wv-cell title="旅行开始时间" :value="delayrisk.startTime"></wv-cell>
        <wv-cell title="旅行结束时间" :value="delayrisk.endTime"></wv-cell>
        <wv-cell title="电话" :value="delayrisk.phone"></wv-cell>
      </wv-group>
      <div class="other">
        <div v-for="(item,index) in insurantList" v-if="index<=0">
          <p class="person">被保险人{{index+1}}</p>
          <wv-group class="mymsg">
            <wv-cell title="姓名" :value="item.userName"></wv-cell>
            <wv-cell title="证件类型" v-if="item.identityType==1" value="身份证" ></wv-cell>
            <wv-cell title="证件类型" v-if="item.identityType==2" value="护照" ></wv-cell>
            <wv-cell title="证件类型" v-if="item.identityType==3" value="港澳台" ></wv-cell>
            <wv-cell title="证件类型" v-if="item.identityType==4" value="军官证" ></wv-cell>
            <wv-cell title="证件类型" v-if="item.identityType==5" value="其他" ></wv-cell>
            <wv-cell title="证件号" :value="item.identityNo"></wv-cell>
          </wv-group>
        </div>
        <div v-show="isVisible" class="content" v-for="(item,index) in insurantList" v-if="index>0">
          <p class="person">被保险人{{index+1}}</p>
          <wv-group class="mymsg">
            <wv-cell title="姓名" :value="item.userName"></wv-cell>
            <wv-cell title="证件类型" v-if="item.identityType==1" value="身份证" ></wv-cell>
            <wv-cell title="证件类型" v-if="item.identityType==2" value="护照" ></wv-cell>
            <wv-cell title="证件类型" v-if="item.identityType==3" value="港澳台" ></wv-cell>
            <wv-cell title="证件类型" v-if="item.identityType==4" value="军官证" ></wv-cell>
            <wv-cell title="证件类型" v-if="item.identityType==5" value="其他" ></wv-cell>
            <wv-cell title="证件号" :value="item.identityNo"></wv-cell>
          </wv-group>
        </div>
        <p class="shouqi last" v-show="!isVisible" @click="isVisible=true"><img src="../../../assets/xiala.png" alt="">
          展开更多 </p>
        <p class="shouqi last" v-show="isVisible" @click="isVisible=false"><img src="../../../assets/shouqi.png" alt="">
          收起更多 </p>
      </div>
    </order>
    <!--如果单机理赔-->
    <router-link  :to="{path:'shenqinglipei',query:{delayriskId:delayrisk.delayriskId}}"  tag="p" class="bottom" v-if="delayrisk.isApply==1">理赔</router-link>
    <!--如果单机理赔详情-->
    <router-link  :to="{path:'lipeidetail',query:{delayriskId:delayrisk.delayriskId}}"  tag="p" class="lipeidetail" v-if="delayrisk.isApply==2">理赔详情</router-link>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getDelayriskDetail} from '../../../../test/unit/http'
  import order from '../../offertemplate/delayriskorder'

  export default {
    name: '',
    props: {},
    data() {
      return {
        isVisible: false,
        delayrisk: {},
        insurantList: {},
        order: {}
      };
    },
    methods: {
      getDelayriskDetailInfo(params) {
        getDelayriskDetail(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.delayrisk = res.object.delayrisk;
            this.insurantList = res.object.insurantList;
          }
        })
      }
    },
    created() {
      let delayriskId = this.$route.query.delayriskId;
      this.getDelayriskDetailInfo({delayriskId: delayriskId})
    },
    components: {
      order
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .title {
    font-size: 18px;
    color: #111;
    padding: 10px 10px 0;
    text-align: left;
  }

  .lipei {
    padding-bottom: 50px;
  }

  .other {
    padding: 20px 0;

    p {
      color: #111;
    }

    .content p {
      padding-top: 20px;
    }
  }

  .shouqi {
    margin-top: 10px;
  }

  .bottom, .lipeidetail {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-image: linear-gradient(to left, #ea6155, #e96775);
    height: 50px;
    line-height: 50px;
    color: #fff;
    z-index: 999;
  }

  .lipeidetail {
    background-image: linear-gradient(to left, #4c92ed, #61beec);
  }
</style>
